import { ObjectDirective, VNode } from "vue";
import { usePermission } from "@/hooks/web/usePermission";

export const permission: ObjectDirective = {
  mounted(el: HTMLButtonElement | HTMLInputElement, binding) {
    if (binding.value == undefined) return;
    const value = binding.value;
    const { hasAnyPermission } = usePermission();
    const result = hasAnyPermission(value);
    console.log("验证权限:", value + "|" + result);
    if (!result) {
      el.disabled = true;
      el.style["disabled"] = "disabled";
      el.classList.add("n-button--disabled");
    }
  }
};
export const checkAuth = async (el: HTMLButtonElement | HTMLInputElement, value: string[] | string) => {
  const { hasAnyPermission } = usePermission();
  const result = hasAnyPermission(value);
  if (!result) {
    el.disabled = true;
    el.style["disabled"] = "disabled";
    el.classList.add("n-button--disabled");
  }
};
export const checkAuthShow = async (el: HTMLButtonElement | HTMLInputElement, value: string[] | string) => {
  const { hasAnyPermission } = usePermission();
  const result = hasAnyPermission(value);
  if (!result) {
    el.disabled = true;
    el.style["display"] = "none";
    el.style["disabled"] = "disabled";
    el.classList.add("n-button--disabled");
  }
};

export const authHide = async (vnode: HTMLButtonElement | HTMLInputElement | VNode) => {
  let el;
  if ("el" in vnode) {
    el = vnode.el;
  } else {
    el = vnode;
  }
  if ("disabled" in el) {
    el.disabled = true;
  }
  if ("style" in el) {
    el.style["display"] = "none";
  }
  if ("style" in el) {
    el.style["disabled"] = "disabled";
  }
  if ("classList" in el) {
    el.classList.add("n-button--disabled");
  }

};
